<style lang="less" scoped>
.avator {
  color: #fff;
  border-radius: 100%;
  background: coral;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>

<template>
  <div class="avator" :style="style">{{textToAvator}}</div>
</template>
<script>
const DEFAULT_HEIGTH = 60;
export default {
  props: ['text', 'h', 'fs', 'radius'],
  computed: {
    textToAvator() {
      if (!this.text || typeof this.text != 'string') {
        return '';
      }
      return this.text.substring(0, 1);
    },
    style() {
      return `height:${parseInt(this.h) || DEFAULT_HEIGTH}rpx;width:${parseInt(
        this.h
      ) || DEFAULT_HEIGTH}rpx;font-size:${parseInt(
        this.fs
      )}rpx;border-radius:${this.radius || '100%'}`;
    }
  }
};
</script>
